<template>
  <div class="content-main">
    <ContentSidebar v-if="!isFuncRoute" />
    <el-scrollbar class="content-main-container">
      <ContentCrumb />
      <div class="content-main-content">
        <router-view />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 路由元数据中判断是否为子级功能页面，是则不显示侧边栏
const isFuncRoute = computed(() => router.currentRoute.value.meta.type === 3)

onMounted(() => {
  const layoutMain = document.querySelector('.layout-main')
  if (layoutMain) {
    layoutMain.style.padding = '0'
  }
})

onBeforeUnmount(() => {
  const layoutMain = document.querySelector('.layout-main')
  if (layoutMain) {
    layoutMain.style.padding = '10px'
  }
})
</script>

<style scoped lang="scss">
.content-main {
  display: flex;
  overflow: hidden;

  .content-main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);

    .content-main-content {
      flex: 1;
      padding: 10px;
    }
  }
}
</style>